<template>
	<view class="container">
		<scroll-view class="scroll-Y" scroll-y="true" :scroll-top="scrollTop" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
			<view class="goTop" @tap="goTop" v-if="old.scrollTop>=2000">
				<uni-icons type="icon-huidingbu" size="20"></uni-icons>
				<text>顶部</text>
			</view>
			<view class="carousel">
				<swiper indicator-dots circular="true" duration="400">
					<swiper-item class="swiper-item" v-for="(item, index) in imgList" :key="index">
						<view class="image-wrapper"><image :src="item.image_url" class="loaded" mode="aspectFill" @click="productPreview(item,index)"></image></view>
					</swiper-item>
				</swiper>
			</view>

			<view class="introduce-section">
				<text class="title">{{ goodinfo.title }}</text>
				<view class="price-box">
					<text class="price-tip">¥</text>
					<text class="price">{{ goodinfo.goods_price !== undefined ? goodinfo.goods_price : '' }}</text>
					<text class="m-price" v-if="goodinfo.del_price !== null">¥{{ goodinfo.del_price }}</text>
					<text class="coupon-tip" v-if="goodinfo.goods_coin!=='0.00'">可用购物币抵扣{{ goodinfo.goods_coin }}元</text>
				</view>
				<view class="bot-row">
					<text>销量: {{ goodinfo.goods_sale }}</text>
					<text>库存: {{ goodinfo.goods_lave }}</text>
					<!-- <text>浏览量: {{goodinfo.view_num}}</text> -->
				</view>
			</view>

			<!--  分享 -->
			<view class="share-section" v-if="usershare.uid > 0">
				<view class="share-icon">
					<text class="yticon icon-xingxing"></text>
					返
				</view>
				<text class="tit">该商品分享可获得奖励</text>
				<text class="yticon icon-bangzhu1"></text>
				<button class="share-btn" plain="true" open-type="share">
					立即分享
					<text class="yticon icon-you"></text>
				</button>
			</view>
			<view class="c-list">
				<view class="c-row b-b" @click="toggleSpec">
					<text class="tit">商品规格</text>
					<view class="con">
						<text class="selected-text" v-for="(sItem, sIndex, key) in specSelected" :key="sIndex">{{ sItem.norm_value }}</text>
					</view>
					<text class="yticon icon-you"></text>
				</view>

				<view class="c-row b-b">
					<text class="tit">发货</text>
					<view class="bz-list con">
						<text>{{ goodinfo.tenant[0].province }} ·</text>
						<text>{{ goodinfo.tenant[0].city }} ·</text>
					</view>
				</view>
				<!-- <view class="c-row b-b">
					<text class="tit">优惠券</text>
					<text class="con t-r red">领取优惠券</text>
					<text class="yticon icon-you"></text>
				</view> -->
				<!-- <view class="c-row b-b">
					<text class="tit">促销活动</text>
					<view class="con-list">
						<text>新人首单送20元无门槛代金券</text>
						<text>订单满50减10</text>
						<text>订单满100减30</text>
						<text>单笔购买满两件免邮费</text>
					</view>
				</view> -->
				<!-- 	<view class="c-row b-b">
					<text class="tit">服务</text>
					<view class="bz-list con">
						<text>7天无理由退换货 ·</text>
						<text>假一赔十 ·</text>
					</view>
				</view> -->
			</view>

			<view class="detail-desc">
				<view class="d-header"><text>图文详情</text></view>
				<rich-text :nodes="item" v-for="item in desc" :key="item.index"></rich-text>
			</view>
			<!-- 评价 -->
			<view class="eva-section">
				<view class="e-header" style="text-align: center;">评价系统维护中</view>
				<!-- <view class="e-header">
					<text class="tit">评价</text>
					<text>(86)</text>
					<text class="tip">好评率 100%</text>
					<text class="yticon icon-you"></text>
				</view> 
				<view class="eva-box">
					<image class="portrait" src="http://img3.imgtn.bdimg.com/it/u=1150341365,1327279810&fm=26&gp=0.jpg" mode="aspectFill"></image>
					<view class="right">
						<text class="name">Leo yo</text>
						<text class="con">商品收到了，79元两件，质量不错，试了一下有点瘦，但是加个外罩很漂亮，我很喜欢</text>
						<view class="bot">
							<text class="attr">购买类型：XL 红色</text>
							<text class="time">2019-04-01 19:21</text>
						</view>
					</view>
				</view> -->
			</view>
			<!-- 底部操作菜单 -->
			<view class="page-bottom">
				<navigator @click="gotoshop()" open-type="switchTab" class="p-b-btn">
					<text class="yticon icon-xiatubiao--copy"></text>
					<text>店铺</text>
				</navigator>
				<navigator url="/pages/cart/cart" open-type="switchTab" class="p-b-btn">
					<text class="yticon icon-gouwuche"></text>
					<text>购物车</text>
				</navigator>
				<view class="p-b-btn" :class="{ active: favorite }" @click="toFavorite">
					<text class="yticon icon-shoucang"></text>
					<text>收藏</text>
				</view>

				<view class="action-btn-group" style="box-shadow: 0 20rpx 40rpx -16rpx #C9C9C9;" v-if="goodinfo.goods_lave <= 0">
					<button type="primary" style="background-color: #C9C9C9;" class=" action-btn no-border buy-now-btn">补货中</button>
					<!-- <button type="primary" style="background-color: #C9C9C9;" class=" action-btn no-border add-cart-btn" >加入购物车</button> -->
				</view>
				<view class="action-btn-group" v-else>
					<button type="primary" class=" action-btn no-border buy-now-btn" @click="buy">立即购买</button>
					<button type="primary" class=" action-btn no-border add-cart-btn" @click="addcart">加入购物车</button>
				</view>
			</view>

			<!-- 规格-模态层弹窗 -->
			<view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
				<!-- 遮罩层 -->
				<view class="mask"></view>
				<view class="layer attr-content" @click.stop="stopPrevent">
					<view class="a-t">
						<image :src="goodinfo.cover_img"></image>
						<view class="right">
							<text class="price">￥{{ specs.price }}</text>
							<text class="stock">库存：{{ specs.lave }}件</text>
							<view class="selected" v-if="specSelected.length > 0">
								已选：
								<text class="selected-text" v-for="(sItem, sIndex, key) in specSelected" :key="sIndex">{{ sItem.norm_value }}</text>
							</view>
						</view>
					</view>
					<view v-for="(item, index) in fieldarr" :key="index" class="attr-list">
						<text>{{ item.norm_name }}</text>
						<view class="item-list">
							<text
								v-for="(childItem, childIndex) in item.skus"
								:key="childIndex"
								class="tit"
								:class="{ selected: childItem.selected }"
								@click="selectSpec(childIndex, childItem.norm_id)"
							>
								{{ childItem.norm_value }}
							</text>
						</view>
					</view>
					<view class="item_sum">
						<text style="font-size: 32upx;">购买数量</text>
						<view class="" style="display: flex;">
							<button type="button" @click="cutsum()">-</button>
							<input type="number" disabled="disabled" v-model="norm.sum" />
							<button type="button" @click="addsum()">+</button>
						</view>
					</view>
					<button class="btn" @click="toggleSpec">完成</button>
				</view>
			</view>
			<!-- 分享 -->
		</scroll-view>
	</view>
</template>

<script>
import share from '@/components/share'
import { getData, postData, getOne, postOne, msg } from '@/api/publicapi'
import uniIcons from '../../ed-icons/ed-icons.vue'
export default {
	components: {
		share,uniIcons
	},
	data() {
		return {
			specClass: 'none',
			specSelected: {},

			favorite: false,
			shareList: [],
			imgList: [
				{
					src: 'https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg'
				},
				{
					src: 'https://gd3.alicdn.com/imgextra/i3/TB1RPFPPFXXXXcNXpXXXXXXXXXX_!!0-item_pic.jpg_400x400.jpg'
				},
				{
					src: 'https://gd2.alicdn.com/imgextra/i2/38832490/O1CN01IYq7gu1UGShvbEFnd_!!38832490.jpg_400x400.jpg'
				}
			],
			desc: [],
			specList: [
				{
					id: 1,
					name: '尺寸'
				},
				{
					id: 2,
					name: '颜色'
				}
			],
			specChildList: [
				{
					id: 1,
					pid: 1,
					name: 'XS'
				},
				{
					id: 2,
					pid: 1,
					name: 'S'
				},
				{
					id: 3,
					pid: 1,
					name: 'M'
				},
				{
					id: 4,
					pid: 1,
					name: 'L'
				},
				{
					id: 5,
					pid: 1,
					name: 'XL'
				},
				{
					id: 6,
					pid: 1,
					name: 'XXL'
				},
				{
					id: 7,
					pid: 2,
					name: '白色'
				},
				{
					id: 8,
					pid: 2,
					name: '珊瑚粉'
				},
				{
					id: 9,
					pid: 2,
					name: '草木绿'
				}
			],
			cmsid: 2710,
			goodinfo: {
				goods_coin: '',
				goods_ev: '',
				goods_lave: '',
				goods_price: '',
				goods_rebate: '',
				goods_sale: '',
				del_price: '',
				tenant: [{ province: '', city: '' }]
			},
			fieldarr: null,
			usershare: {
				uid: 0
			},
			skuid: '',
			norm: {
				sum: 1
			},
			specs: {
				price: 0,
				lave: 0
			},
			uid: 0,
			scrollTop: 0,
			old: {
				scrollTop: 0
			}
		};
	},
	async onLoad(options) {
		//接收传值,id里面放的是标题，因为测试数据并没写id
		let id = options.id;
		if (id) {
			this.cmsid = id;
		}
		if (options.uid) {
			this.uid = options.uid;
		}
		this.getgoods();
		this.getFavorite();
	},
	onShow() {
		this.getusershare();
	},
	methods: {
		// 添加购物车
		// * *pid   : 商品ID
		//     * skuid  : 商品规格ID
		//     * buy_num: 购买数量, 不填默认为 1
		addcart() {
			if (this.usershare.status_code != undefined && this.usershare.status_code == 500) {
				uni.navigateTo({
					url: '/pages/public/warrant'
				});
				return;
			}

			let data = {
				pid: this.norm.cms_id,
				buy_num: this.norm.sum
			};
			if (this.norm.sku_id !== undefined) {
				data.skuid = this.norm.sku_id;
			}
			postOne('front/shopcart', data).then(res => {
				if (res.status_code === 200) {
					msg('成功加入购物车');
				}
			});
		},

		// 获取商品
		getgoods() {
			let data = {
				id: this.cmsid
			};
			uni.showLoading({
				title: '加载中'
			});
			getData('front/cms', this.cmsid).then(res => {
				let data = res.data;
				this.imgList = data.images;

				for (var i = 0; i < data.content.length; i++) {
					let desc = this.formatRichText(data.content[i].content);
					// console.log(desc)
					this.desc.push(desc);
				}
				this.goodinfo = data;
				if (data.norm.length > 0) {
					this.getattr(data.norm);
				} else {
					this.norm.price = data.goods_price;
					this.norm.lave = data.goods_lave;
					this.norm.cms_id = this.cmsid;

					this.countmprice();
				}

				uni.hideLoading();
			});
		},
		// 去重规格
		getattr(norm) {
			let fieldlist = norm.filter(function(element, index, self) {
				return self.indexOf(element) === index;
			});
			let fieldarr = [];
			let skusarr = [];
			// 将规格以及规格组分离
			for (let i = 0; i < fieldlist.length; i++) {
				for (let j = 0; j < fieldlist[i].field.length; j++) {
					fieldlist[i].field[j].skus = [];
					fieldarr.push(fieldlist[i].field[j]);
				}
				for (let j = 0; j < fieldlist[i].skus.length; j++) {
					fieldlist[i].skus[j].selected = false;
					skusarr.push(fieldlist[i].skus[j]);
				}
			}
			fieldarr = this.unique(fieldarr);
			for (let i = 0; i < fieldarr.length; i++) {
				for (let j = 0; j < skusarr.length; j++) {
					if (fieldarr[i].id === skusarr[j].norm_id) {
						fieldarr[i].skus.push(skusarr[j]);
					}
				}
			}
			this.fieldarr = JSON.parse(JSON.stringify(fieldarr));
			this.uniquefield(fieldarr);
		},
		unique(arr) {
			for (var i = 0; i < arr.length; i++) {
				for (var j = i + 1; j < arr.length; j++) {
					if (arr[i].id === arr[j].id) {
						// 第一个等同于第二个，splice方法删除第二个
						arr.splice(j, 1);
						j--;
					}
				}
			}
			return arr;
		},
		uniquefield(arr) {
			console.log(arr);
			for (let o = arr.length - 1; o >= 0; o--) {
				if (arr[o].skus.length <= 0) {
					this.fieldarr.splice(o, 1);
				} else {
					this.fieldarr[o].skus = this.unique(this.fieldarr[o].skus);

					this.selectSpec(0, this.fieldarr[o].id);
				}
			}
		},
		//规格弹窗开关
		toggleSpec() {
			if (this.specClass === 'show') {
				this.specClass = 'hide';
				setTimeout(() => {
					this.specClass = 'none';
				}, 250);
			} else if (this.specClass === 'none') {
				this.specClass = 'show';
			}
		},
		//选择规格
		selectSpec(index, pid) {
			// console.log(index, pid)
			let list = this.fieldarr;
			// this.specSelected = {;
			list.forEach(item => {
				if (item.id === pid) {
					if (this.specSelected[item.norm_name] !== undefined) {
						this.specSelected[item.norm_name].selected = false;
					}
					item.skus[index].selected = true;
					this.specSelected[item.norm_name] = item.skus[index];
				}
			});
			// 选出规格
			let basic = [];
			let skuid = '';
			for (let key in this.specSelected) {
				basic.push(this.specSelected[key].id);
			}
			// console.log(basic)
			basic = basic.sort();
			// console.log(basic)
			for (let i = 0; i < basic.length; i++) {
				skuid += basic[i] + ',';
			}
			this.skuid = skuid.substring(0, skuid.lastIndexOf(','));

			for (var i = 0; i < this.goodinfo.norm.length; i++) {
				if (this.skuid == this.goodinfo.norm[i].sku_id) {
					this.norm = this.goodinfo.norm[i];
					this.norm.sum = 1;
				}
			}
			this.countmprice();
		},
		// //分享

		//收藏
		toFavorite() {
			this.favorite = !this.favorite;
			let data = {
				id: this.cmsid,
				tag: 'shop'
			};

			postOne('front/collection', data).then(res => {
				msg(res.message);
			})
		},
		getFavorite() {
			let data = {
				id: this.cmsid,
				tag: 'shop'
			};

			getOne('front/collection/getconlle', data).then(res => {
				if (res.data.id !== undefined) {
					this.favorite = true;
				}
			});
		},

		buy() {
			if (this.usershare.status_code != undefined && this.usershare.status_code == 500) {
				uni.navigateTo({
					url: '/pages/public/warrant'
				});
				return;
			}

			let goodsData = {
				pid: this.norm.cms_id,
				num: this.norm.sum,
				type: 'product'
			};
			if (this.uid > 0) {
				goodsData.parent_uid = this.uid;
			}
			if (this.norm.sku_id !== undefined) {
				goodsData.skuid = this.norm.sku_id;
			}
			uni.navigateTo({
				url: `/pages/order/createOrder?data=${JSON.stringify({
					goodsData: goodsData
				})}`
			});
		},
		stopPrevent() {},

		formatRichText(html) {
			//控制小程序中图片大小

			let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
				match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
				match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
				match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
				return match;
			});
			newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
				match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
				return match;
			});

			newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;"');
			newContent = newContent.replace(/\<p/gi, '<p style="	margin: 0px;"');
			// console.log(newContent)
			return newContent;
		},
		// 获取用户是否有分享权限
		getusershare() {
			postData('front/cms/cmsshare').then(res => {
				this.usershare = res;
			});
		},
		// 计算商品价格
		addsum() {
			if (this.norm.lave > this.norm.sum + 1) {
				this.norm.sum += 1;
			}
			this.countmprice();
		},
		cutsum() {
			if (this.norm.sum > 1) {
				this.norm.sum -= 1;
			}
			this.countmprice();
		},
		countmprice() {
			this.specs.price = this.norm.price * 1 * (this.norm.sum * 1);

			this.specs.lave = this.norm.lave;
		},
		gotoshop() {
			let id = this.goodinfo.tenant_id;
			uni.navigateTo({
				url: `/pages/myshop/myshop?id=${id}`
			});
		},
		upper(e) {
			console.log('upper', e)
		},
		scroll(e) {
			// console.log('scroll', e.detail)
			this.old.scrollTop = e.detail.scrollTop
		},
		lower(e) {
			console.log('lower', e)
		},
		goTop(e) {
			this.scrollTop = this.old.scrollTop
			this.$nextTick(function() {
				this.scrollTop = 0
			})
		},
		productPreview(item,index){
			console.log('this.imgList',this.imgList)
			let arry=[]
			this.imgList.map((val,index)=>{
				arry[index]=this.imgList[index].image_url
			})
			
			uni.previewImage({
				urls:arry,
				loop:"true",
				current:index,
				indicator:"number"
			})
		}
	},
	onShareAppMessage(res) {
		let that = this;
		let pages = getCurrentPages();
		let curPage = pages[pages.length - 1].route;
		let title = '易度商城';
		let path = '/' + curPage + '?id=' + this.cmsid;
		console.log(path);
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		if (that.usershare.uid > 0) {
			title = that.usershare.nickname + '邀请您购买' + that.goodinfo.title;
			path += '&uid=' + that.usershare.uid;
		}
		console.log(path);
		return {
			title: title,
			path: path,
			imageUrl: that.goodinfo.cover_img,
			desc: that.goodinfo.title
		};
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
	padding-bottom: 160upx;
}

button[plain] {
	border: 0;
	height: 40upx;
	line-height: 40upx;
}

.icon-you {
	font-size: $font-base + 2upx;
	color: #888;
}

.carousel {
	height: 722upx;
	position: relative;

	swiper {
		height: 100%;
	}

	.image-wrapper {
		width: 100%;
		height: 100%;
	}

	.swiper-item {
		display: flex;
		justify-content: center;
		align-content: center;
		height: 750upx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}
}

/* 标题简介 */
.introduce-section {
	background: #fff;
	padding: 20upx 30upx;

	.title {
		font-size: 32upx;
		color: $font-color-dark;
		height: 50upx;
		line-height: 50upx;
	}

	.price-box {
		display: flex;
		align-items: baseline;
		height: 64upx;
		padding: 10upx 0;
		font-size: 26upx;
		color: $uni-color-primary;
	}

	.price {
		font-size: $font-lg + 2upx;
	}

	.m-price {
		margin: 0 12upx;
		color: $font-color-light;
		text-decoration: line-through;
	}

	.coupon-tip {
		align-items: center;
		padding: 4upx 10upx;
		background: $uni-color-primary;
		font-size: $font-sm;
		color: #fff;
		border-radius: 6upx;
		line-height: 1;
		transform: translateY(-4upx);
	}

	.bot-row {
		display: flex;
		align-items: center;
		height: 50upx;
		font-size: $font-sm;
		color: $font-color-light;

		text {
			flex: 1;
		}
	}
}

/* 分享 */
.share-section {
	display: flex;
	align-items: center;
	color: $font-color-base;
	background: linear-gradient(left, #fdf5f6, #fbebf6);
	padding: 12upx 30upx;

	.share-icon {
		display: flex;
		align-items: center;
		width: 70upx;
		height: 30upx;
		line-height: 1;
		border: 1px solid $uni-color-primary;
		border-radius: 4upx;
		position: relative;
		overflow: hidden;
		font-size: 22upx;
		color: $uni-color-primary;

		&:after {
			content: '';
			width: 50upx;
			height: 50upx;
			border-radius: 50%;
			left: -20upx;
			top: -12upx;
			position: absolute;
			background: $uni-color-primary;
		}
	}

	.icon-xingxing {
		position: relative;
		z-index: 1;
		font-size: 24upx;
		margin-left: 2upx;
		margin-right: 10upx;
		color: #fff;
		line-height: 1;
	}

	.tit {
		font-size: $font-base;
		margin-left: 10upx;
	}

	.icon-bangzhu1 {
		padding: 10upx;
		font-size: 30upx;
		line-height: 1;
	}

	.share-btn {
		flex: 1;
		text-align: right;
		font-size: $font-sm;
		color: $uni-color-primary;
	}

	.icon-you {
		font-size: $font-sm;
		margin-left: 4upx;
		color: $uni-color-primary;
	}
}

.c-list {
	font-size: $font-sm + 2upx;
	color: $font-color-base;
	background: #fff;

	.c-row {
		display: flex;
		align-items: center;
		padding: 20upx 30upx;
		position: relative;
	}

	.tit {
		width: 140upx;
	}

	.con {
		flex: 1;
		color: $font-color-dark;

		.selected-text {
			margin-right: 10upx;
		}
	}

	.bz-list {
		height: 40upx;
		font-size: $font-sm + 2upx;
		color: $font-color-dark;

		text {
			display: inline-block;
			margin-right: 30upx;
		}
	}

	.con-list {
		flex: 1;
		display: flex;
		flex-direction: column;
		color: $font-color-dark;
		line-height: 40upx;
	}

	.red {
		color: $uni-color-primary;
	}
}

/* 评价 */
.eva-section {
	display: flex;
	flex-direction: column;
	padding: 20upx 30upx;
	background: #fff;
	margin-top: 16upx;

	.e-header {
		display: flex;
		align-items: center;
		height: 70upx;
		font-size: $font-sm + 2upx;
		color: $font-color-light;

		.tit {
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			margin-right: 4upx;
		}

		.tip {
			flex: 1;
			text-align: right;
		}

		.icon-you {
			margin-left: 10upx;
		}
	}
}

.eva-box {
	display: flex;
	padding: 20upx 0;

	.portrait {
		flex-shrink: 0;
		width: 80upx;
		height: 80upx;
		border-radius: 100px;
	}

	.right {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: $font-base;
		color: $font-color-base;
		padding-left: 26upx;

		.con {
			font-size: $font-base;
			color: $font-color-dark;
			padding: 20upx 0;
		}

		.bot {
			display: flex;
			justify-content: space-between;
			font-size: $font-sm;
			color: $font-color-light;
		}
	}
}

/*  详情 */
.detail-desc {
	background: #fff;
	margin-top: 16upx;

	.d-header {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80upx;
		font-size: $font-base + 2upx;
		color: $font-color-dark;
		position: relative;

		text {
			padding: 0 20upx;
			background: #fff;
			position: relative;
			z-index: 1;
		}

		&:after {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translateX(-50%);
			width: 300upx;
			height: 0;
			content: '';
			border-bottom: 1px solid #ccc;
		}
	}
}

/* 规格选择弹窗 */
.attr-content {
	padding: 10upx 30upx;

	.a-t {
		display: flex;

		image {
			width: 170upx;
			height: 170upx;
			flex-shrink: 0;
			margin-top: -40upx;
			border-radius: 8upx;
		}

		.right {
			display: flex;
			flex-direction: column;
			padding-left: 24upx;
			font-size: $font-sm + 2upx;
			color: $font-color-base;
			line-height: 42upx;

			.price {
				font-size: $font-lg;
				color: $uni-color-primary;
				margin-bottom: 10upx;
			}

			.selected-text {
				margin-right: 10upx;
			}
		}
	}

	.item_sum {
		display: flex;
		justify-content: space-between;
		padding-top: 10rpx;
		padding-bottom: 20rpx;
		border-top: rgba(0, 0, 0, 0.2) 1px solid;
		border-bottom: rgba(0, 0, 0, 0.2) 1px solid;

		button {
			width: 50upx;
			height: 50upx;
			padding: 0px;
			line-height: 50upx;
			margin: 0px;
		}

		input {
			width: 200upx;
			font-size: 32upx;
			text-align: center;
			border: #999999 1px solid;
			border-radius: 5upx;
			color: #000000;
			background-color: #f8f8f8;
			border: 1px solid rgba(0, 0, 0, 0.1);
		}
	}

	.attr-list {
		display: flex;
		flex-direction: column;
		font-size: $font-base + 2upx;
		color: $font-color-base;
		padding-top: 30upx;
		padding-left: 10upx;
	}

	.item-list {
		padding: 20upx 0 0;
		display: flex;
		flex-wrap: wrap;

		text {
			display: flex;
			align-items: center;
			justify-content: center;
			background: #eee;
			margin-right: 20upx;
			margin-bottom: 20upx;
			border-radius: 100upx;
			min-width: 60upx;
			height: 60upx;
			padding: 0 20upx;
			font-size: $font-base;
			color: $font-color-dark;
		}

		.selected {
			background: #fbebee;
			color: $uni-color-primary;
		}
	}
}

/*  弹出层 */
.popup {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 99;

	&.show {
		display: block;

		.mask {
			animation: showPopup 0.2s linear both;
		}

		.layer {
			animation: showLayer 0.2s linear both;
		}
	}

	&.hide {
		.mask {
			animation: hidePopup 0.2s linear both;
		}

		.layer {
			animation: hideLayer 0.2s linear both;
		}
	}

	&.none {
		display: none;
	}

	.mask {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.layer {
		position: fixed;
		z-index: 99;
		bottom: 0;
		width: 100%;
		min-height: 40vh;
		border-radius: 10upx 10upx 0 0;
		background-color: #fff;

		.btn {
			height: 66upx;
			line-height: 66upx;
			border-radius: 100upx;
			background: $uni-color-primary;
			font-size: $font-base + 2upx;
			color: #fff;
			margin: 30upx auto 20upx;
		}
	}

	@keyframes showPopup {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes hidePopup {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	@keyframes showLayer {
		0% {
			transform: translateY(120%);
		}

		100% {
			transform: translateY(0%);
		}
	}

	@keyframes hideLayer {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(120%);
		}
	}
}

/* 底部操作菜单 */
.page-bottom {
	position: fixed;
	left: 30upx;
	bottom: 30upx;
	z-index: 95;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 690upx;
	height: 100upx;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 0 20upx 0 rgba(0, 0, 0, 0.5);
	border-radius: 16upx;

	.p-b-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: $font-sm;
		color: $font-color-base;
		width: 96upx;
		height: 80upx;

		.yticon {
			font-size: 40upx;
			line-height: 48upx;
			color: $font-color-light;
		}

		&.active,
		&.active .yticon {
			color: $uni-color-primary;
		}

		.icon-fenxiang2 {
			font-size: 42upx;
			transform: translateY(-2upx);
		}

		.icon-shoucang {
			font-size: 46upx;
		}
	}

	.action-btn-group {
		display: flex;
		height: 76upx;
		border-radius: 100px;
		overflow: hidden;
		box-shadow: 0 20upx 40upx -16upx #fa436a;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
		background: linear-gradient(to right, #ffac30, #fa436a, #f56c6c);
		margin-left: 20upx;
		position: relative;

		&:after {
			content: '';
			position: absolute;
			top: 50%;
			right: 50%;
			transform: translateY(-50%);
			height: 28upx;
			width: 0;
			border-right: 1px solid rgba(255, 255, 255, 0.5);
		}

		.action-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 180upx;
			height: 100%;
			font-size: $font-base;
			padding: 0;
			border-radius: 0;
			background: transparent;
		}
	}
}
.scroll-Y {
	height: 100vh;
}
.goTop {
	position: fixed;
	top: 75%;
	right:20upx;
	background-color:rgba($color: #e4e4e4, $alpha: 0.88);
	width:80upx;
	height: 80upx;
	border-radius:50%;
	text-align: center;
	// width: 100upx;
	// height: 100upx;
	uni-icons{
		// margin-top: 2upx;
		display: block;

	}
	text{
		display: block;
		font-size: 20upx;
		// margin-buttom: 2upx;
	}
}
</style>
